<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../org/angular.min.js"></script>
    <script src="../org/jquery.min.js"></script>
    <script src="../org/angular-ui-router.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>

<body>
<style>
    *{padding: 0px;margin: 0px;}
    ul,ol,li{list-style: none}
    div[ui-view=top]{
        background-color: #2a6496;
        width: 100%;
        height: 20%;
    }
    div[ui-view=left]{
        /*background-color: #737373;*/
        width: 200px;
        float: left;
        height: 80%;
    }
    div[ui-view=right]{
       /* background-color: #245269;*/
        position: absolute;
        left:200px;
        right:0px;
    }
</style>

<div ng-app="hd">
    <div ui-view="top"></div>
    <div ui-view="left"></div>
    <div ui-view="right"></div>
</div>

<script>
    var m = angular.module('hd', ['ui.router']);

    m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //默认路由（没有匹配的情况下显示这个锚点）
        $urlRouterProvider.otherwise('/my');
        //定义路由规则
        $stateProvider
            .state('my', {
                url: '/my',
                views:{
                    top:{
                        templateUrl:'view/top.html'
                    },
                    left:{
                        templateUrl:'view/my.html'
                    },
                    right:{
                        templateUrl:'view/about.html'
                    }
                }
            })
            .state('video', {
                url: '/video',
                views:{
                    top:{
                        templateUrl:'view/top.html'
                    },
                    left:{
                        templateUrl:'view/video.html'
                    },
                    right:{
                        templateUrl:'view/video_list.html'
                    }
                }
            })

    }])


</script>

</body>

</html>